// 下拉框(生产成本单)
<template>
  <view
    class="items-box"
    :style="{ marginTop: (form.top || 0) + 'rpx' }"
    :class="form.className || ''"
  >
    <view
      v-for="(item, index) in form.items"
      :key="index"
      class="form-box"
      :style="{
        border: item.isShow ? 'none' : '',
        paddingBottom:
          item.isShow && index + 1 == form.items.length ? '24rpx' : ''
      }"
    >
      <view class="top" @tap="form.showDetail(item)">
        <view class="form-left">
          <view class="left-code">{{ item.main_title }}</view>
          <view class="left-time">{{ item.sub_title || '' }}</view>
        </view>
        <view>
          <text
            class="form-right iconfont"
            :class="item.isShow ? 'icon-xiangshang_xiao' : 'icon-xiangxia_xiao'"
          ></text>
        </view>
      </view>
      <view class="bottom" v-if="item.isShow">
        <view
          class="bottom-item"
          v-for="(item1, index1) in item.detailItems"
          :key="index1"
        >
          <view class="text-over-1" style="flex: 1; margin-right: 10rpx">
            {{ item1.title }}
          </view>
          <view class="text-over-1" style="flex: 1; text-align: right">
            {{ item1.value }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * collapseForm: {
        // 自定义组件类名（可不传）
        className: '',
        // 展示隐藏详情(必要)
        showDetail: (item) => {
          item.isShow = !item.isShow
          console.log('1111111111')
        },
        // 详情数据
        items: []
      }
items = {
            // 标题
            main_title: item.purchase_code,
            // 副标题
            sub_title: '单据日期：' + (item.purchase_time || ''),
            // 必须传 展开关闭详情
            isShow: false,
            // 展开数据详情
            detailItems: [
              {
                title: '成品',
                value: item.goods_info
              },
              {
                title: '生产数量',
                value: item.number
              },
              {
                title: '验收数量',
                value: item.finish_number
              },
              {
                title: '商品成本',
                value: item.all_money
              },
              {
                title: '委外加工费用',
                value: item.outsourcing_free
              },
              {
                title: '计时工资',
                value: item.hour_free
              },
              {
                title: '计件工资',
                value: item.wages_free
              },
              {
                title: '原材料成本',
                value: item.production_free
              },
              {
                title: '退料成本',
                value: item.material_free
              },
              {
                title: '成本金额',
                value: item.cost_free
              }
            ]
          }
 */
export default {
  props: {
    form: {
      type: Object,
      default: {}
    }
  }
}
</script>

<style lang="less" scoped>
.items-box {
  width: 702rpx;
  background: #ffffff;
  border-radius: 16rpx;
  margin: 0 auto;
  .form-box {
    width: 654rpx;

    margin: auto;
    border-bottom: 1px solid #eeeeee;
    &:last-child {
      border: none;
    }
    .top {
      min-height: 128rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .form-left {
        .left-code {
          font-size: 28rpx;
          font-weight: 500;
          color: #111111;
        }
        .left-time {
          font-size: 24rpx;
          color: #666666;
        }
      }
      .form-right {
        font-size: 32rpx;
        color: #999999;
      }
    }
    .bottom {
      width: 654rpx;
      background: #f7f7f7;
      border-radius: 8rpx;
      .bottom-item {
        width: 606rpx;
        min-height: 72rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        padding: 24rpx 0;
        border-bottom: 1px solid #eeeeee;
        &:last-child {
          border: none;
        }
      }
    }
  }
}

.text-over-1 {
  font-size: 26rpx;
  color: #111111;
}
</style>
